<!--  -->
<template>
  <div class="table-container">
    <div class="search-container">
      <!-- <el-button @click="openCause" class="search-btn" size="small" type="primary" icon="el-icon-plus">定义技术原因关联</el-button>
      <el-button @click="deleteSbjsyy" class="search-btn" size="small" type="danger">批量删除</el-button> -->
      <el-form :model="listQuery" :inline="true" class="search">
        <el-form-item label="技术原因名称">
          <el-input size="mini" v-model="listQuery.tdjsyySearch" @keyup.enter.native="getTableList">
          </el-input>
        </el-form-item>
        <el-form-item label="技术原因代码" v-if="activeName == 'zy'">
          <el-input size="mini" v-model="listQuery.tdjsmSearch" @keyup.enter.native="getTableList">
          </el-input>
        </el-form-item>
        <el-form-item label="技术分类代码" v-if="activeName == 'gy'">
          <el-input size="mini" v-model="listQuery.jsflSearch" @keyup.enter.native="getTableList">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="getTableList">查询</el-button>
          <el-button size="mini" type="primary" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="dwbmTableBtn">
      <el-button
        type="primary"
        icon="el-icon-setting"
        size="mini"
        class="columnBtn"
        @click="cccEvent('show', sbjsglColumnTable)"
      >配置列</el-button>
      <el-button class="exportBtn" type="primary" icon="el-icon-download" @click="cccEvent('export', sbjsglColumnTable)" size="mini">导 出</el-button>
    </div>
    <el-table :data="tablelist" ref="tableTdxz" border style="width: 100%;" height="calc(100% - 125px)" v-loading="listLoading">
      <template v-for="col in sbjsglColumnData">
        <el-table-column
          :show-overflow-tooltip="true"
          :key="col.id"
          :prop="col.field"
          :label="col.title"
          :min-width="col.minWidth"
          :align="col.align"
          :header-align="col.align"
          :sortable="col.sortable"
          :formatter="col.formatter"
          :fixed="col.fixed"
        ></el-table-column>
      </template>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-size="listQuery.size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div> 
    <Cause @handleClickRefuse="handleClickRefuse" ref="CauseRef" :causeData="causeData"></Cause> 
    <ccc ref="ccc"></ccc>
  </div>
</template>

<script>
import { codeModulePrefix } from '../../../../config';
import Cause from "./Cause";
import ccc from "@/dialogCommom/ccc";
import { getSbjsPage, getSbjsGyPage, deleteJsyy } from "../../../../api/dmgl/sbjsgl";
export default {
  props: {
    propData: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data () {
    return {
      activeName: 'zy',
      tableKey:0,
      tablelist: [],
      listLoading:false,
      causeData:"",
      listQuery: {
        tdsbm:"",
        size:10,
        current: 1,
        tdjsyySearch: '',
        tdjsmSearch: '',
        sbfl: '',
        jsflSearch: ''
      },
      total: 0,
      delData:"",
      sbjsglColumnTable: 'code_sb_jsyy', // 设备技术关联列配置参数
      sbjsglColumnData: [] //设备技术关联表格列数据
    }
  },

  components: {
    Cause,
    ccc
  },

  watch: {
    propData: {
      deep: true,
      handler(newVal, oldVal) {
        const that = this
        that.causeData = newVal.tdsbm;
        that.listQuery.tdsbm = newVal.tdsbm;
        that.listQuery.sbfl = newVal.sbfl;
        that.activeName = newVal.activeName;
        if (newVal.activeName == 'zy') {
          that.sbjsglColumnTable = 'code_sb_jsyy'
        } else {
          that.sbjsglColumnTable = 'code_sb_jsyy_gy'
        }
        that.cccEvent("load", that.sbjsglColumnTable)
        that.getTableList()
      }
    }
  },

  mounted() {
    const that = this
    that.cccEvent("load", that.sbjsglColumnTable)
    that.getTableList()
  },

  beforeUpdate () { 
    //解决列配置引发的滚动条问题
    this.$nextTick(()=>{
      this.$refs.tableTdxz.doLayout()
    }) 
  },

  methods: {
    /** 重置 */
    reset() {
      const that = this
      that.listQuery.tdjsyySearch = ''
      that.listQuery.tdjsmSearch = ''
      that.listQuery.current = 1
      that.listQuery.size = 10
      that.getTableList()
    },

    /* 多选集合 */
    handleSelection(rows){
      this.delData = rows
    },
    openCause(){
      if(this.causeData){
        this.$refs.CauseRef.openCause();
      }else{
        this.$message({type: 'info', message: '请选择设备编码'})
      }
    },
    async getTableList(){
      const that = this
      let res = null
      that.listLoading = true;
      if (that.activeName == 'zy') {
        res = await getSbjsPage(that.listQuery)
      } else {
        res = await getSbjsGyPage(that.listQuery)
      }
      if(res.code == 0){
        that.tablelist = res.data.records;
        that.total = res.data.total;
        that.listLoading = false;
      }else{
        that.$message.error(res.message)
      }
    },
    deleteSbjsyy(){
      if(this.delData == ""){
        this.$message({type: 'info', message: '请选择要删除的数据'})
      }else{
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let delArr = {
              tdsbm:this.causeData,
              tdjsm:[]
            };
            let params = [];
            for (let i = 0; i < this.delData.length; i++) {
                  params.push(this.delData[i].tdjsm)
              };
            delArr.tdjsm = params;
           deleteJsyy(delArr).then(res => {
            if(res.code == 0){
              this.getTableList();
              this.$message({type: 'success',message: '删除成功!'});
            }else{
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'});
        });
      }
    },
    handleClickRefuse(val){
      this.tablelist = val;
    },
    /** 改变每页条数 */
    handleSizeChange(val) {
      const that = this
      that.listQuery.size = val
      that.getTableList()
    },

    /** 改变页数 */
    handleCurrentChange(val) {
      const that = this
      that.listQuery.current = val
      that.getTableList()
    },

    //列配置---临时任务事件---初始化页面
    cccEvent(method, table) {
      if (method === "show") {
        this.$refs.ccc.show(table);
      } else if (method === "load") {
        new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(this.$refs.ccc.load(table));
          });
        }).then(response => {
          this.sbjsglColumnData = response;
        });
      } else if (method === "export") {
        let url = ''
        let fileName = ''
        if (this.activeName == 'zy') {
          url = `${codeModulePrefix}/dm-sbjsyy/page`
          fileName = '中压设备技术关联'
        } else {
          url = `${codeModulePrefix}/dm-sbjsyy-gy/page`
          fileName = '高压设备技术关联'
        }
        let vo = {
          tableCode: table,
          param: this.listQuery,
          url: url,
          method: "POST",
          fileName: fileName,
          total: this.total
        };
        this.$refs.ccc.exportExcel(vo);
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.table-container{
  width: 100%;
  height: 100%;
  .search-container{
    padding: 0;
  }
  .pagination-container {
    padding-top: 6px;
    text-align: center;
  }
  .dwbmTableBtn {
    text-align: right;
    margin-bottom: 1px;
  }
}
.search /deep/ .el-form-item {
  margin-bottom: 7px;
  margin-top: 0px;
}
.search /deep/ .el-form-item__label {
  line-height: 41px;
}
</style>